<script lang="tsx" setup>
import { useDesignStore } from "@/stores/module/design";
import { NCard, NDataTable, type DataTableColumn, type PaginationProps, NImage, NButton, useDialog } from "naive-ui";
import { reactive, ref, shallowRef, type Ref, type ComponentPublicInstance } from "vue";
import { getUsers } from "@/api/user";
import type { FormSchema } from "@/typings/dynamic-search";
import DynamicSearch from "@/components/dynamic-search/Index.vue";
import type { UserInfo } from "@/typings/api";
import { FilterOperateEnum, PageRequest } from "@/util/page-request";
import { usePageRequest } from "@/hooks/usePageRequest";
import { useI18n } from "@/hooks/useI18n";
import CreateUserModal from "@/components/modal/CreateUserModal.vue";

const { t } = useI18n();

const { getPrefixCls } = useDesignStore();

const prefixCls = getPrefixCls("user");

const dialog = useDialog();

const column: DataTableColumn<UserInfo>[] = [
  {
    title: t("user.account"),
    key: "username",
  },
  {
    title: t("user.username"),
    key: "nickName",
    render({ profile }) {
      return profile.nickName;
    },
  },
  {
    title: t("user.email"),
    key: "email",
    render({ profile }) {
      return profile.email;
    },
  },
  {
    title: t("user.address"),
    key: "address",
    render({ profile }) {
      return profile.address;
    },
  },
  {
    title: t("user.avatar"),
    key: "address",
    render({ profile }) {
      return <NImage class={`border-rd-50%`} width={40} src={profile.avatar} />;
    },
  },
  {
    title: t("common.operation"),
    key: "",
    render({ id }) {
      return (
        <div class={`flex items-center gap-5`}>
          <NButton type="primary">{t("common.edit")}</NButton>
          <NButton onClick={() => deleteUser(id)}>{t("common.delete")}</NButton>
        </div>
      );
    },
  },
];
const formConfig: Ref<FormSchema[]> = ref([
  {
    type: "Input",
    label: t("user.account"),
    value: null,
    code: "username",
    operate: FilterOperateEnum.CONTAIN,
    placeholder: t("common.inputHolder"),
  },
  {
    type: "Input",
    label: t("user.username"),
    value: null,
    code: "nickName",
    operate: FilterOperateEnum.CONTAIN,
    placeholder: t("common.inputHolder"),
  },
]);

const { pageRequest, genPageRequest, reset, pageCondition, genPageCondition } = usePageRequest(formConfig.value);

const userInfoList = shallowRef<UserInfo[]>([]);

const paginationReactive: PaginationProps = reactive({
  page: pageCondition.pageIndex,
  pageSize: pageCondition.pageSize,
  showSizePicker: true,
  pageSizes: [10, 20, 30],
  onChange: (page: number) => {
    genPageCondition(page);
    paginationReactive.page = page;
    search();
  },
  onUpdatePageSize: (pageSize: number) => {
    genPageCondition(1, pageSize);
    paginationReactive.pageSize = pageSize;
    search();
  },
});

const isLoading = ref<boolean>(false);

const deleteUser = (id: number) => {
  dialog.info({
    title: t("common.tips"),
    content: `${t("common.confirm")} ${t("common.delete")}？`,
    positiveText: t("common.confirm"),
    negativeText: t("common.cancel"),
    onPositiveClick: () => {},
    onNegativeClick: () => {},
  });
};

const getUser = async (pageRequest: PageRequest) => {
  try {
    isLoading.value = true;
    const { success, data } = await getUsers(pageRequest);
    if (success) {
      userInfoList.value = data;
    }
  } catch (error) {
  } finally {
    isLoading.value = false;
  }
};

const search = () => {
  genPageRequest();
  getUser(pageRequest);
};

search();

const cancel = () => {
  reset();
  getUser(pageRequest);
};

const createUserModalRef = ref<InstanceType<typeof CreateUserModal> | null>();
const addUser = () => {
  createUserModalRef.value?.controlModal(true);
};
</script>

<template>
  <div :class="`${prefixCls}`">
    <NCard>
      <DynamicSearch
        label-placement="left"
        labelWidth="70"
        :formConfig="formConfig"
        @search="search"
        @cancel="cancel"
      />
    </NCard>

    <NCard>
      <div :class="`${prefixCls}-button-group`">
        <NButton type="primary" @click="addUser">{{ t("common.add") }}</NButton>
      </div>
      <NDataTable :columns="column" :data="userInfoList" :loading="isLoading" :pagination="paginationReactive" />
    </NCard>
    <CreateUserModal ref="createUserModalRef" />
  </div>
</template>

<style lang="less" scoped>
@prefix-cls: ~"@{namespace}-user";
.@{prefix-cls}{
  &-button-group {
    @apply flex justify-end p-3;
  }
}
</style>
